import React from 'react'
import {Row, Col,Checkbox , Input, Button, Table, Select,} from 'antd';
import './PurchaseOrderDetail.css'
import {
    DownOutlined,
    PrinterFilled,
    ProfileFilled,
    CarFilled,
} from "@ant-design/icons";
const {Option} = Select;
const outStockColumns = [
    {
        title: '',
        dataIndex: 'No',
        align: 'center',
    },

    {
        title: '主图',
        dataIndex: 'mainPic',
        align: 'center',

    },

    {
        title: '商品名称',
        dataIndex: 'goodsName',
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: '商品编码',
        dataIndex: 'goodsNo',

    },
    {
        title: '库存数量（深圳仓）',
        dataIndex: 'stockNum',

    },
    {
        title: '订购数',
        dataIndex: 'buyNum',
    },

    {
        title: '已出库数',
        dataIndex: 'outStockNum',
    },
    {
        title: '本次出库数',
        dataIndex: 'nowNum',
        render: () => (
            <Input/>
        ),
    },

];
const outColumns = [
    {
        title: '',
        dataIndex: 'No',
        align: 'center',
    },

    {
        title: '主图',
        dataIndex: 'mainPic',
        align: 'center',

    },

    {
        title: '商品名称',
        dataIndex: 'goodsName',
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: '商品编码',
        dataIndex: 'goodsNo',

    },
    {
        title: '本次出库数',
        dataIndex: 'outNum',

    },

];
const outStockTableData = [];
const outTableData = [];

class PurchaseOrderOutStock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText: '全部级别',
            selectValue: 1,
            current: '订单详情',
            orderNo: ' DH-O-20200508-405868 ',
            customerName: '小雷家电线厂',
            value: 1,
            logVisible: false,
        }
    }
    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectValue: value,
        })
    }
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    render() {

        return (<div  style={{ position: 'relative',backgroundColor:'white'}}>

            {/*//出库发货记录*/}
            <Row >
                <Col span={24}>
                    <Row style={{marginTop: 20}} align={'middle'}>
                        <Col span={24} className={'outStock'}>
                            <span className={'orderInfo'} style={{fontSize: '1.1rem', color: '#FB7884'}}>待订单审核</span>
                            <span className={'orderInfo'}>订单号：{this.state.orderNo} <span
                                className={'orderWay'}>代下单</span>  </span>
                            <span className={'orderInfo'}>客户名称：{this.state.customerName}【三级代理】</span>
                            <span className={'orderInfo'}>收货信息：小雷家养殖场</span>
                            <span className={'orderInfo'}>夏磊</span>
                            <span className={'orderInfo'}>15744354334</span>
                            <span className={'orderInfo'}>成都市天府新区生态养殖基地</span>
                        </Col>

                    </Row>
                    {/*待发货清单*/}
                    <Row className={'outStockList'} align={'middle'}>
                        <Col span={20} align={'left'} style={{paddingLeft: '1rem'}}>
                            <ProfileFilled/> 待出库商品清单
                        </Col>
                        <Col span={4} align={'right'} style={{paddingRight: '1rem'}}>
                            <DownOutlined className={'outStockDown'}/>
                        </Col>
                    </Row>
                    <Row className={'detailTable'} align={'middle'} style={{padding:'1rem 0',borderLeft:'1px solid #F0F0F0',borderRight:'1px solid #F0F0F0'}}>
                        <Col span={2} align={'left'} style={{paddingLeft: '1rem'}}>
                            出库仓库：

                        </Col>
                        <Col span={2}  align={'left'} style={{paddingLeft: '1rem'}}>

                            <Select defaultValue="1" bordered={false} style={{marginLeft: '-1rem'}}
                                    onChange={this.handleChange}>
                                <Option value="1">深圳仓</Option>
                                <Option value="2">成都仓</Option>
                                <Option value="3">上海仓</Option>
                            </Select>

                        </Col>
                        <Col span={8}  align={'left'} style={{paddingLeft: '1rem'}}>
                            <Checkbox>仅显示库存大于0的商品</Checkbox>

                        </Col>
                        <Col span={12} align={'right'} style={{paddingRight: '1rem'}}>
                            本次出库数设为0表示此商品暂不出库
                            <Button style={{
                                marginLeft: 20,
                                width: 80,
                                borderRadius: 4,
                                backgroundColor: '#12C09F',
                                color: 'white'
                            }}>出库</Button>
                        </Col>
                    </Row>
                    <Row className={'detailTable'}>
                        <Col span={24} className={'outStockTable'}>
                            <Table
                                bordered
                                pagination={{position: ['none', 'none'],}}
                                columns={outStockColumns}
                                dataSource={outStockTableData}
                                className='table'
                            />
                        </Col>
                    </Row>
                    {/*出库发货记录*/}
                    <Row className={'outStockList'} align={'middle'}>
                        <Col span={20} align={'left'} style={{paddingLeft: '1rem'}}>
                            <CarFilled />  出库/发货记录
                        </Col>
                        <Col span={4} align={'right'} style={{paddingRight: '1rem'}}>
                            <DownOutlined className={'outStockDown'}/>
                        </Col>
                    </Row>
                    <Row className={'detailTable'} align={'middle'} style={{padding:'.8rem 0',borderLeft:'1px solid #F0F0F0',borderRight:'1px solid #F0F0F0'}}>

                        <Col span={24} align={'right'} style={{paddingRight:'1rem'}}>
                            <span className={'btClass'}><PrinterFilled/> 打印出库单</span>
                            <span className={'btClass'}><span className={'iconfont icon-ziyuan'}/> 导出</span>
                            <span className={'btClass'}><span className={'iconfont icon-zuofei'}/> 作废</span>
                            <Button style={{
                                marginLeft: 20,
                                width: 80,
                                borderRadius: 4,
                                backgroundColor: '#12C09F',
                                color: 'white'
                            }}>发货</Button>
                        </Col>
                    </Row>
                    <Row className={'detailTable'}>
                        <Col span={24} className={'outStockTable'}>
                            <Table
                                bordered
                                pagination={{position: ['none', 'none'],}}
                                columns={outColumns}
                                dataSource={outTableData}
                                className='table'
                            />
                        </Col>
                    </Row>
                    <Row className={'detailTable outStockInfo'} align={'middle'} >

                        <Col span={24} align={'left'} style={{paddingRight:'1rem'}}>
                            <Row>
                                <Col span={2}>
                                    <span className={'btClass'}>状态</span>
                                </Col>
                                <Col span={2}>
                                    <span className={'btClass'}>待完成</span>
                                </Col>

                            </Row>
                            <Row>
                                <Col span={2}>
                                    <span className={'btClass'}>出库信息</span>
                                </Col>
                                <Col span={22}>
                                    <span className={'btClass'}>出库编号：L-20200509-71992</span>
                                    <span className={'btClass'}> 出库时间：2020-05-09 05:23</span>
                                    <span className={'btClass'}>出库仓库：深圳仓</span>
                                </Col>


                            </Row>
                            <Row>
                                <Col span={2}>
                                    <span className={'btClass'}>物流信息</span>
                                </Col>
                                <Col span={22}>
                                    <span className={'btClass'}>物流日期：2020-05-09 12:46</span>
                                    <span className={'btClass'}> 物流公司：顺丰</span>
                                    <span className={'btClass'}>物流单号：45634523523560</span>
                                    <span className={'btClass'}>物流备注：易碎</span>
                                </Col>
                            </Row>


                        </Col>
                    </Row>
                </Col>
            </Row>



        </div>);

    }
}

export default PurchaseOrderOutStock
